<script setup lang="ts">
import CenterTitle from '@/components/CenterTitle/index.vue'
import ItemSquare from '@/components/ItemSquare/index.vue'
import Tabs from '@/components/Tabs/index.vue'
import { useAuth } from '@/stores/index'
import APIMarket from '@/api/market'
import PaginationAlbum from '@/components/PaginationAlbum/index.vue'
import type { SaleType, SaleResult } from '@/api/market/types'

const type = shallowRef<SaleType>('all')
const { token, info } = storeToRefs(useAuth())

const tabsList = reactive([{
    label: '全部', value: 'all'
}, {
    label: '关注', value: 'concern'
}, {
    label: '视频', value: 'video'
}, {
    label: '图片', value: 'picture'
}, {
    label: '音乐', value: 'music'
}, {
    label: '字体', value: 'font'
}])

function onChange(item: any) {
    type.value = item.value
}

const queryParams = ref<PageQuery>({
    page: 1,
    limit: 8
})

const list = ref<SaleResult[]>([])
const total = shallowRef<number>(0)
const loading = shallowRef<boolean>(false)

function getList() {
    if (token.value) {
        loading.value = true
        APIMarket.getLoginSale(type.value, queryParams.value).then(({ total: count, data }) => {
            list.value = data
            total.value = count
        }).finally(() => {
            loading.value = false
        })
    } else {
        loading.value = true
        APIMarket.getSale(type.value, queryParams.value).then(({ total: count, data }) => {
            list.value = data
            total.value = count
        }).finally(() => {
            loading.value = false
        })
    }
}

watch(type, () => {
    getList()
}, { immediate: true })

</script>

<template>
    <div class="market">
        <CenterTitle title="销售广场" englishTitle="XIAO SHOU GUANG CHANG" />
        <Tabs :list="tabsList" @onChange="onChange" />
        <div class="list" v-loading="loading">
            <el-empty description="暂无内容" v-if="list.length == 0" />
            <ItemSquare v-for="(item, index) in list" :key="index" :item="item" @get-list="getList" />
        </div>
        <div class="pagination">
            <PaginationAlbum :total="total" v-model:current-page="queryParams.page" :page-size="queryParams.limit"
                @get-list="getList" />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.market {
    box-sizing: border-box;
    width: 1340px;
    padding: 0 20px;
    margin: 0 auto;

    .list {
        margin-top: 30px;
        border-top: 1px solid #E8E8E8;
    }

    .pagination {
        margin-top: 30px;
    }
}
</style>